<template>
  <div class="card">
    <div>
      <a-input v-model="form.search.name" class="inputStyle" placeholder="请输入礼包名称"></a-input>
      <a-button class="btn" type="primary" @click="getList">查询</a-button>
      <a-button class="btn" @click="reset">重置</a-button>
      <a-button type="primary" @click="add">新增</a-button>
    </div>
    <a-table
      bordered
      :rowKey="(record, index) => index"
      :pagination="{
        pageSize: form.page_size,
        pageSizeOptions: ['20', '30', '40', '50'],
        size: 'small',
        showSizeChanger: true,
        showQuickJumper: true,
        total: total,
        current: form.page,
        showTotal: total => `共 ${total} 条`
      }"
      @change="paginChange"
      style="margin-top: 10px; border: 1px solid #e8e8e8"
      show-size-changer
      show-quick-jumper
      :loading="loading"
      :data-source="tableData"
      :columns="columns"
    >
      <div slot="url" slot-scope="text, record">
        <viewer :images="[record.url]">
          <img style="cursor: pointer" width="120" height="85" :src="record.url" alt="" />
        </viewer>
      </div>
      <div slot="operate" slot-scope="text, record">
        <a-button class="btn" @click="edit(record)" type="danger">编辑</a-button>
        <a-button @click="del(record.id)" type="danger">删除</a-button>
      </div>
    </a-table>
    <AddDebt :isShowAdd.sync="isShowAdd" :object.sync="object" @upload="getList" />
  </div>
</template>

<script>
import AddDebt from './dialog/AddDebt.vue'
import { getDebtListAPI, delDebtListAPI } from '@/api/product.js'
export default {
  name: 'debtGiftPackage',
  components: {
    AddDebt
  },
  data() {
    return {
      object: {},
      isShowAdd: false,
      loading: false,
      total: 0,
      form: {
        brand_id: process.env.VUE_APP_BRAND_ID,
        page: 1,
        page_size: 50,
        search: {
          name: ''
        }
      },
      columns: [
        {
          title: '#',
          dataIndex: 'id',
          align: 'center'
        },
        {
          title: '礼包名称',
          dataIndex: 'name',
          align: 'center'
        },
        {
          title: '礼包介绍',
          dataIndex: 'introduce',
          align: 'center'
        },
        {
          title: '礼包图片',
          align: 'center',
          scopedSlots: { customRender: 'url' }
        },
        {
          title: '金额',
          dataIndex: 'money',
          align: 'center'
        },
        {
          title: '时间',
          dataIndex: 'utime',
          align: 'center'
        },
        {
          title: '操作',
          align: 'center',
          scopedSlots: { customRender: 'operate' }
        }
      ],
      tableData: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    reset() {
      this.form = {
        brand_id: process.env.VUE_APP_BRAND_ID,
        page: 1,
        page_size: 50,
        search: {
          name: ''
        }
      }
      this.getList()
    },
    paginChange(value) {
      console.log(value)
      this.form.page = value.current
      this.form.page_size = value.pageSize
      this.getList()
    },
    async getList() {
      try {
        this.loading = true
        const result = await getDebtListAPI(this.form)
        this.total = result.data.total
        this.tableData = result.data.list
      } finally {
        this.loading = false
      }
    },
    del(id) {
      this.$confirm({
        title: '确认删除吗?',
        content: h => <div style="color:red;">此操作不可撤回</div>,
        onOk: async () => {
          try {
            await delDebtListAPI({ brand_id: process.env.VUE_APP_BRAND_ID, ids: id })
            this.$message.success('操作成功')
            this.getList()
          } catch (error) {
            this.$message.error(error.data.msg)
          }
        },
        onCancel() {
          return
        },
        class: 'test'
      })
    },
    add() {
      this.isShowAdd = true
    },
    edit(data) {
      this.object = data
      this.isShowAdd = true
    }
  }
}
</script>

<style lang="less" scoped>
.inputStyle {
  margin-right: 10px;
  width: 200px;
}
.btn {
  margin-right: 10px;
}
</style>
